export default class Components{
    static InputView(placeholderText,buttonText){
        return `
            <input type="text" class="todo-input" placeholder="${ placeholderText }" ></input>
            <button class="add-button" >${buttonText}</button>
        `;
    }
    static ListView(data){
        return `
            <div class="todo-list">
                ${
                    data.length ? data.map(todo=>{
                        return Components.TodoView(todo)
                    })
                    : '当前暂无数据'
                }
            </div>
        `.split(',').join('');
    }
    static TodoView(todo){
        const { id,content,completed } = todo;
        return `
            <div class="todo-item">
                <input type="checkbox" data-id="${id}"  ${completed ? "checked" : ""} />
                <span style="text-decoration: ${completed ? 'line-through' : ''}">${content}</span>
                <button data-id="${id}">删除</button>
            </div>
        `;
    }
}